<template>
  <div class="Score">
    <div class="Score-val">
      <span>{{ score }}</span> 分
    </div>
    <div class="Score-msg">{{ showtext }}</div>
    <div class="Score-x" @mouseout="correctScore">
      <div>
        <span
          :class="[score < 1 ? 'xleft' : 'xleftActive']"
          @mouseover="hoverScore(1)"
          @click="clickScore(1)"
        ></span>
        <span
          :class="[score < 2 ? 'xright' : 'xrightActive']"
          @mouseover="hoverScore(2)"
          @click="clickScore(2)"
        ></span>
      </div>
      <div>
        <span
          :class="[score < 3 ? 'xleft' : 'xleftActive']"
          @mouseover="hoverScore(3)"
          @click="clickScore(3)"
        ></span>
        <span
          :class="[score < 4 ? 'xright' : 'xrightActive']"
          @mouseover="hoverScore(4)"
          @click="clickScore(4)"
        ></span>
      </div>
      <div>
        <span
          :class="[score < 5 ? 'xleft' : 'xleftActive']"
          @mouseover="hoverScore(5)"
          @click="clickScore(5)"
        ></span>
        <span
          :class="[score < 6 ? 'xright' : 'xrightActive']"
          @mouseover="hoverScore(6)"
          @click="clickScore(6)"
        ></span>
      </div>
      <div>
        <span
          :class="[score < 7 ? 'xleft' : 'xleftActive']"
          @mouseover="hoverScore(7)"
          @click="clickScore(7)"
        ></span>
        <span
          :class="[score < 8 ? 'xright' : 'xrightActive']"
          @mouseover="hoverScore(8)"
          @click="clickScore(8)"
        ></span>
      </div>
      <div>
        <span
          :class="[score < 9 ? 'xleft' : 'xleftActive']"
          @mouseover="hoverScore(9)"
          @click="clickScore(9)"
        ></span>
        <span
          :class="[score < 10 ? 'xright' : 'xrightActive']"
          @mouseover="hoverScore(10)"
          @click="clickScore(10)"
        ></span>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.Score {
  text-align: center;
  .Score-val {
    color: #ffc600;
    font-size: 16px;
    span {
      font-size: 36px;
    }
  }
  .Score-msg {
    color: #ffc600;
    font-size: 16px;
    margin-bottom: 10px;
  }
  .Score-x {
    display: flex;
    height: 50px;
    justify-content: center;
    div {
      width: 30px;
      height: 30px;
      display: flex;
      margin: 0 2px;
      span {
        display: inline-block;
        width: 15px;
        height: 30px;
      }
      .xleft {
        background: url("../../assets/images/xleft.png");
      }
      .xright {
        background: url("../../assets/images/xright.png");
      }
      .xleftActive {
        background: url("../../assets/images/xleft-active.png");
      }
      .xrightActive {
        background: url("../../assets/images/xright-active.png");
      }
    }
  }
}
</style>
<script>
export default {
  props: ['scorevalue'],
  data() {
    return {
      score: 0, // 分数(也可以从父组件传递) => 渲染的分数
      tempScore: null, // 未点击时,记录分数,点击后改变
      showtext: "",
    };
  },

  methods: {
    // 鼠标滑动, 改变分数，根据分数修改对应文字
    hoverScore(val) {
      this.score = val;
      this.showtextCon()
    },

    // 点击分数，点击之后改变评分
    clickScore(val) {
      this.score = val;
      this.tempScore = val;
      window.localStorage.setItem('MYSCORE', this.score + '分，' + this.showtext)
      this.$emit('getscore')
    },

    // 鼠标滑出，未确定,回到最初的分数
    correctScore() {
      this.score = this.tempScore;
      this.showtextCon()
    },

    // 根据分数 改变文字
    showtextCon() {
      if (this.score == 10) this.showtext = "完美";
      else if (this.score == 9) this.showtext = "棒极了";
      else if (this.score >= 7) this.showtext = "比较好";
      else if (this.score >= 5) this.showtext = "一般般";
      else if (this.score >= 3) this.showtext = "比较差";
      else if (this.score >= 1) this.showtext = "超烂啊";
      else this.showtext = '请点击星星评分'
    },
  },

  created() {
    this.score = this.scorevalue
    this.tempScore = this.score;
    this.showtextCon()    
  },
};
</script>
